<template>
    <a-drawer
      :visible="modalVisible"
      @close="handleClose"
      :width="375"
      :body-style="{ paddingBottom: '80px'}"
      :destroyOnClose = false
      title="添加产品"
    >
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="地区"
        >
          <a-input
            disabled
            v-decorator="[
          'province',
          { rules: [{ required: true, message: 'Please input your name' }], initialValue: province },
        ]"
          />
        </a-form-item>

        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="描述"
        >
          <a-textarea
            :rows="8"
            v-decorator="[
          'description',
          { rules: [{ required: true, message: 'Please input your name' }] },
        ]"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 20, offset: 4 }">
          <a-button type="primary" html-type="submit">
            提交
          </a-button>
        </a-form-item>
      </a-form>
    </a-drawer>
</template>

<script>
import { addProduct } from '../../service/service';

export default {
  name: 'Add-Product-Modal',
  props: {
    modalVisible: {
      type: Boolean,
      default: false
    },
    handleClose: Function,
    province: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
      },
      form: this.$form.createForm(this, { name: 'productList' }),
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          addProduct(values).then((res) => {
            const { status, msg } = res.data;
            if (status) {
              this.handleClose();
              this.$emit('add-ok');
            } else {
              this.$message.error(msg);
            }
          }).catch((err) => {
            console.log(err);
          });
        }
      });
    }
  },
  watch: {
    modalVisible: {
      // eslint-disable-next-line no-unused-vars
      handler(val) {
        this.form.resetFields();
      }
    }
  }
};
</script>

<style scoped>

</style>
